<template>
  <div>
    <CustomDialog
      title="新增/编辑商会动态"
      width="900px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="ruleForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1 mt-0">基本信息</div>
        <!-- 动态标题 -->
        <el-form-item label="" prop="name" class="row-all">
          <template #label>
            <div class="form-label required">动态标题</div>
          </template>
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 发文部门 -->
        <el-form-item prop="department" class="row-left">
          <template #label>
            <div class="form-label required">发文部门</div>
          </template>
          <el-input v-model="form.department" placeholder="请输入"></el-input>
        </el-form-item>
        <!--动态内容 -->
        <el-form-item label="" prop="desc" class="row-all mb-4">
          <template #label>
            <div class="form-label required">动态内容</div>
          </template>
          <el-input
            v-model="form.desc"
            type="textarea"
            :rows="8"
            maxlength="2000"
            show-word-limit
            placeholder="2000字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 图片 -->
        <el-form-item label="" prop="imgList" class="row-all">
          <template #label>
            <div>图片</div>
          </template>
          <CustomUpload :img-list.sync="form.imgList" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button class="rounded-content-wrap" type="primary" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>

    <PositionPicker
      :visible.sync="isShowMap"
      :position.sync="form.position"
      :addrs.sync="form.addrs"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomUpload from '@/components/admin/manage/carrier/common/CustomUpload/index.vue'
import CustomDialog from '@/components/admin/manage/carrier/common/CustomDialog/index.vue'
import PositionPicker from '@/components/admin/manage/carrier/common/CustomAMap/PositionPicker.vue'
import addEditMixin from '@/components/admin/manage/carrier/common/addEditMixin'

export default Vue.extend({
  components: { CustomUpload, CustomDialog, PositionPicker },
  mixins: [addEditMixin({ templateName: 'B_CONSOLE_INFORMATION' })],
  data() {
    return {
      form: {
        name: null,
        department: null,
        desc: null,
        imgList: [],
      },
      rules: {
        name: [
          { required: true, message: '请输入动态标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        department: [{ required: true, message: '请输入发文部门', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入动态内容', trigger: 'blur' }],
      },
    }
  },
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
